<template>
  <div>
    <!--      头像、昵称，根据接受者id参数是否为-1判断加不加”回复 xxx“-->
    <UserHead :sender="comment.sender" :date="comment.date" :receiver="comment.receiver">
      <template v-slot:reply>
        <!--        向后端发送请求，请求添加一个comment，参数文章id、所回复的评论的id、发送人id（session中取）、接受人id（即所点击评论的发送者）-->
        <el-button @click="selectCommentId = comment.id" style="margin-right: 5px">
          <router-link to="/index/article/subComment/reply">
            回复
          </router-link>
        </el-button>
      </template>
    </UserHead>
    <!--      评论内容-->
    <p style="margin-left: 1%;float: left">{{ comment.comment }}</p>
    <br>
    <br>
    <br>
    <!--          点赞按钮-->
    <el-button @click="subLike(comment.id)" plain @mouseenter.native="$refs.likeText.style.color = '#606266'"
               style="padding: 10px;font-size: 16px;border: none">
      <!--      三元表达是为已点赞评论的爱心图标上色-->
      <i ref="aiXinSubComment" class="iconfont icon-aixin" :style="{'color':isLike?'red':'#606266'}"></i>
      <span ref="likeText">点赞 {{ starsTem }}</span>
    </el-button>
    <router-view :articleId="comment.articleId" :receiverId="comment.sender.id" :commentId="comment.id" v-if="selectCommentId!=-1"></router-view>
    <p v-if="isFirst">&nbsp;&nbsp;{{ comment.commentNum }}条回复</p>
  </div>
</template>

<script>
import UserHead from '../user/UserHead'

export default {
  name: 'ChildComment',
  components: {UserHead},
  methods: {
    subLike: function (commentId) {
      if (this.isLike) {
        this.$refs.aiXinSubComment.style.color = 'black'
        this.starsTem--
      } else {
        this.$refs.aiXinSubComment.style.color = 'red'
        this.starsTem++
      }
      this.isLike = !this.isLike
    }
  },
  props: ['comment', 'index', 'isFirst'],
  data () {
    return {
      starsTem: this.comment.stars,
      selectCommentId: -1,
      isLike: this.comment.isLike
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
</style>
